<template>
	<!-- 劳务学习 -->
	<view class="upload">
		<view class="" v-if="activeTab===0">
			<view class="top" v-for="(item,index) in list">
				<view @click="goVideo(index)" class="top_left">
					<image :src="'https://jsjhj.net'+item.url_images" mode=""></image>
				</view>
				<view class="top_right">
					<text class="text1">{{item.name}}</text>
					<text class="text2">进度：{{item.time| s_to_hs}}/{{item.lang | s_to_hs}}</text>
					<text class="text2">学习时间：{{item.watch_time}}</text>
				</view>
			</view>
		</view>
		<image v-if="list.length<1"
			style="position: absolute;top:0;left: 0;bottom: 0;right: 0;margin: auto;width: 600rpx;"
			src="../../../static/image/no-data.png" mode=""></image>
	</view>
</template>

<script>
	import uniTabs from '@/components/v-tabs/v-tabs.vue'
	import api from '@/static/js/api.js'
	export default {
		components: {
			uniTabs
		},

		data() {
			return {
				tabs: [
					'学习进度',
					// '已完成学习',
				],
				activeTab: 0,
				userinfo: '',
				list: []
			}
		},
		onShow() {
			this.userinfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.workerStudy()
		},
		//秒换分钟
		filters: {
			s_to_hs: function(s) {
				var h;
				h = Math.floor(s / 60);
				s = s % 60;
				h += '';
				s += '';
				h = (h.length == 1) ? '0' + h : h;
				s = (s.length == 1) ? '0' + s : s;
				return h + ':' + s;
			}
		},
		methods: {
			// change(index) {
			// 	this.activeTab = index
			// }

			workerStudy() {
				// this.userinfo.uid = 10
				// api.workerStudy('jhj.video.history', '_api_public_jhj_video_history_list', this.userinfo.access_token, this
				// 		.userinfo.uid, this.userinfo.partner_id, 1000, 1)
				// 	.then(res => {
				// 		this.list = res.data
				// 	}).catch(e => {
				// 		uni.showToast({
				// 			icon: 'none',
				// 			title: e.message
				// 		})
				// 	})
				api.workerStudy('jhj.video.history', '_api_public_jhj_video_history_list', this.userinfo.access_token, this
						.userinfo.uid, this.userinfo.partner_id, 1000, 1)
					.then(res => {
						this.list = res.data
					})

			},
			goVideo(index) {
				uni.navigateTo({
					url: `/pages/home/class/workerStudyVideo?time=${this.list[index].time}&url_video=${this.list[index].url_video}&name=${this.list[index].name}&lang=${this.list[index].lang}&id=${this.list[index].id}`
				})
			}
		}

	}
</script>

<style lang="less" scoped>
	.upload {
		width: 100%;
		// height: 100vh;
		background-color: #EBEEF5;
	}

	.tabs {
		position: relative;
	}

	/deep/ .v-tabs {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		line-height: 100rpx;
	}

	/deep/ .v-tabs__container-item {
		width: 100%;
		justify-content: center;
	}

	.top {
		font-size: 28rpx;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: left;
		padding: 40rpx;

		.top_left {
			// width: 30%;
			height: 160rpx;
			background-color: #3F536E;

			image {
				width: 220rpx;
				height: 180rpx;
			}
		}

		.top_right {
			text {
				display: block;
				padding: 10rpx 0;
			}

			.text1 {
				font-size: 32rpx;
			}

			.text2 {
				font-size: 28rpx;
				color: #808080;
			}

			margin-left: 20rpx;
		}
	}
</style>
